<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .body {
        padding: 100px;
      }
      .card {
        margin-top: 200px;
        margin: 0 auto;
        padding: 2em;
        width: 200px;
        height: 200px;
        background-color: #1c1f2b;
        text-align: center;
        border-radius: 10px;
        position: relative;
      }
      /* 自定义角度属性声明 */
      @property --angle {
        syntax: '<angle>'; /* 指定角度类型 */
        initial-value: 0deg; /* 初始值0度 */
        inherits: false; /* 禁止继承 */
      }
      /* 卡片伪元素样式 */
      .card::after,
      .card::before {
        content: ''; /* 必须声明伪元素 */
        position: absolute; /* 绝对定位 */
        height: 100%; /* 继承父元素高度 */
        width: 100%; /* 继承父元素宽度 */
        background-image: conic-gradient(
          /* 锥形渐变 */ from var(--angle),
          /* 动态起始角度 */ transparent 70%,
          /* 70%透明区域 */ #ff4545,
          /* 红色渐变开始 */ #00ff99,
          /* 绿色渐变 */ #006aff,
          /* 蓝色渐变 */ #ff0095 /* 品红渐变结束 */
        );
        /* background-image: conic-gradient(from var(--angle), transparent 70%, blue); */
        top: 50%; /* 垂直定位 */
        left: 50%; /* 水平定位 */
        translate: -50% -50%; /* 居中修正 */
        z-index: -1; /* 置于父元素下方 */
        padding: 15px; /* 边框间距 */
        border-radius: 10px; /* 圆角匹配父元素 */
        animation: 3s spin linear infinite; /* 旋转动画 */
      }

      /* 前置模糊层 */
      .card::before {
        filter: blur(1.5rem); /* 模糊半径24px */
        opacity: 0.5; /* 半透明效果 */
      }

      /* 旋转动画关键帧 */
      @keyframes spin {
        from {
          --angle: 0deg; /* 起始角度 */
        }
        to {
          --angle: 360deg; /* 结束角度 */
        }
      }
    </style>
  </head>

  <body>
    <div class="card">Learn CSS Border Animations in 6 Minutes</div>
  </body>
</html>
